<template>
  <div>
    <el-form :model="search" ref="form" :inline="false" size="normal">
      <div class="from_flex">
        <el-form-item label="植物名称">
          <el-input v-model="search.name" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch" class="seek backgauge">搜索</el-button>
          <el-button @click="handleReset" class="backgauge reset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="box1">
      <div>
        <span>批量删除</span>
        <el-button
          @click="handleDelte"
          type="danger"
          :icon="Delete"
          size="small"
          class="el_button"
          circle
        />
      </div>
      <div>
        <el-button @click="handleDrawer(null)" class="seek backgauge">新增</el-button>
      </div>
    </div>
    <bugmenu />
    <el-table :data="BugRecord" :header-cell-style="{ textAlign: 'center' }" border stripe>
      <el-table-column type="selection" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column label="防治时间" prop="curetime" width="260" />
      <el-table-column label="防治对象" prop="cureobject" width="160" />
      <el-table-column label="防治规模(亩)" prop="curescale" width="160" />
      <el-table-column label="防治办法" prop="cureway" width="200" />
      <el-table-column label="情况说明" prop="preofcond" width="230" />
      <el-table-column label="备注" prop="remark" width="160" />
      <el-table-column label="操作" fixed="right" width="140">
        <template #default="scope">
          <div class="flex">
            <el-button type="primary" size="small" @click="handleDrawer(scope.row)">编辑</el-button>
            <el-popconfirm title="你真的要删除🐎?" @confirm="handleDel(scope.row, scope.$index)">
              <template #reference>
                <el-button v-permit type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div class="flex justify-end mt-5">
      <!-- :total="total"设置总数据条数跟数据库对应 -->
      <!-- :page-sizes="[15, 50, 100, 200]"设置每页显示的数据条数 -->
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[15, 50, 100, 200]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 控制编辑新增按钮显示页面 -->
    <el-drawer
      :title="rowData ? '编辑' : '新增'"
      v-model="drawer"
      direction="rtl"
      size="60%"
      destroy-on-close
    >
      <newadd :edata="rowData" @update:table-data="handleUpdate" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BugRecordDel, BugRecordGet } from '../../api/Plant/indextwo'
import { Delete } from '@element-plus/icons-vue' //导入图标使用
import { reactive } from 'vue'
import newadd from './BugRecord/new_addtwo.vue' //新增
import { RuleFormTypetwo } from './BugRecord/types/BugRecord'
// import router from '@/router';

const search = reactive({
  name: ''
})

////////////////////////////////////////////////////////////

//模糊查询
const handleSearch = async () => {
  console.log(search)
  current.value = 1 //重新回到第一页
  //current.value是当前的页码  也就是 page
  let res = await BugRecordGet(1, pageSize.value, search) //重新调用api的BugRecordGet   携带查询条件
  BugRecord.value = res.data.results
  let { results, count } = res.data
  BugRecord.value = results
  total.value = count //更新不同条件下查出的数据总条数
}
// 重置
const handleReset = async () => {
  search.name = ''
  current.value = 1
  let res = await BugRecordGet(1, pageSize.value, search)
  BugRecord.value = res.data.results
  let { results, count } = res.data
  BugRecord.value = results
  total.value = count
  // BugRecord.value = res.data.results
}
//数据包
const BugRecord = ref<Array<RuleFormTypetwo | null>>([])
const total = ref<number>(0) //分页定义total
BugRecordGet().then((res) => {
  console.log('111', res, BugRecord)
  let { results, count } = res.data
  BugRecord.value = results
  total.value = count //把数据总数量赋给total
})
/////////

const drawer = ref<boolean>(false)
const rowData = ref<RuleFormTypetwo | null>(null) //存放新增、编辑的数据包
//新增
const handleDrawer = (row: RuleFormTypetwo | null) => {
  console.log('区分新增、编辑', row)
  drawer.value = true
  rowData.value = row
}

/////////
const handleUpdate = async (newhealth: RuleFormTypetwo) => {
  drawer.value = false
  if (rowData.value) {
    // 编辑后,更新本地列表
    for (let i = 0; i < BugRecord.value.length; i++) {
      if (BugRecord.value[i]!.objectId == newhealth.objectId) {
        BugRecord.value[i] = newhealth
      }
    }
  } else {
    // 新增后,更新本地列表
    // console.log('123', newhealth);
    // BugRecord.value.push(newhealth)
    let res = await BugRecordGet(1, pageSize.value, search)
    let { results, count } = res.data
    BugRecord.value = results
    total.value = count
    BugRecord.value = res.data.results
    current.value = 1 //重新回到第一页
  }
}

// 删除事件
const handleDel = (row: RuleFormTypetwo, idx: number) => {
  console.log('删除', row, idx)
  BugRecordDel(row.objectId).then(async () => {
    BugRecord.value.splice(idx, 1) //删除本地
    let res = await BugRecordGet(1, pageSize.value, search)
    let { results, count } = res.data
    BugRecord.value = results
    total.value = count
    BugRecord.value = res.data.results
    current.value = 1 //重新回到第一页
  })
}

//批量删除
const handleDelte = (row: RuleFormTypetwo, selection: true) => {
  console.log('批量删除', row, selection)
  // BugRecordDel(row.objectId).then(() => {
  //   BugRecord.value.splice(selection, true)//删除本地
  //   // healthData.value = res.data.results
  // })
}
//分页插件
const current = ref<number>(1) //从第一页开始
const pageSize = ref<number>(15) //每页显示数据条数的默认值
//页码变化时重新发请求拿数据 使用async 和 await
const handleSizeChange = async () => {
  //定义选择每页多少数据的按钮
  current.value = 1 //重新回到第一页
  //current.value是当前的页码  也就是 page
  let res = await BugRecordGet(1, pageSize.value, search) //重新调用api的BugRecordGet
  BugRecord.value = res.data.results
}
const handleCurrentChange = async (page: number) => {
  let res = await BugRecordGet(page, pageSize.value, search) //重新调用api的BugRecordGet
  BugRecord.value = res.data.results
}
</script>

<style scoped>
.from_flex {
  display: flex;
  margin-top: 20px;
}

.box1 {
  widows: 100%;
  display: flex;
  justify-content: space-between;
}

.el_button {
  margin-left: 5px;
}

.seek {
  background-color: #2b59dd;
  color: white;
  margin-left: 40px;
}

.reset {
  color: #2b59dd;
  border: 1px solid #2b59dd;
}

.btdel {
  color: #ff163d;
}

.btlok {
  color: #266cf2;
}
</style>
